<template>
	<view class="content">
		<div class="top">
			<div class="topMenus" :style="{ top: statusBarHeight + 'px', paddingTop: menuBarHeight + 'px' }">
				<div class="left">
					<div class="userHeader" @click="toUser">
						<u-icon name="gongzhu" custom-prefix="custom-icon" top="5" size="120" v-if="sex == 0"></u-icon>
						<u-icon name="wangzi" custom-prefix="custom-icon" top="5" size="120" v-else></u-icon>
					</div>
				</div>
				<div class="title">
					<span class="zhName">露食光</span>
					<span class="enName">Fresh Bites</span>
				</div>
			</div>
		</div>
		<div class="advertisingCard">
			<div class="insideImg">
				<img src="../../static/banner.png" alt="" style="width: 100%; height: 100%; border-radius: 20rpx" />
			</div>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			menuBarHeight: 0,
			sex: 0
		};
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
	},
	methods: {
		toUser() {
			uni.switchTab({
				url: '/pages/user/user'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	background-color: #f4f4f5;

	.top {
		width: 100%;
		height: 20%;
		background-color: #fc7903;
		border-radius: 0 0 25rpx 25rpx;
		.topMenus {
			width: 100%;
			height: 120rpx;
			position: fixed;
			left: 0;
			.left {
				height: 100%;
				position: absolute;
				left: 35rpx;
				top: 50%;
				transform: translateY(-50%);
				.userHeader {
					width: 120rpx;
					height: 120rpx;
					background-color: #fff;
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;
				}
			}
			.title {
				height: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				flex-direction: column;
				justify-content: end;
				align-items: center;
				.zhName {
					font-size: 56rpx;
					font-weight: bold;
					color: #fff;
					font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;
				}
				.enName {
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
					font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;
				}
			}
		}
	}
	.advertisingCard {
		width: calc(100% - 70rpx);
		height: 25%;
		background-color: #fff;
		margin-left: 35rpx;
		margin-top: -8%;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.insideImg {
			width: calc(100% - 36rpx);
			height: calc(100% - 36rpx);
			border-radius: 20rpx;
		}
	}
}
</style>
